<template>
    <div class="container">
        <el-row>
            <el-col class="applicationTitle">
                <p>申请列表</p>
            </el-col>
        </el-row>
        <section class="applicationContent">
            <el-form :inline="true" :model="form" class="demo-form-inline">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="姓名">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="性别">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="年龄">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="来源">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="编号">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="设备">
                            <el-input v-model="form.resource" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="医师">
                            <el-select v-model="form.acceptStatus" size="small">
                                <el-option label="拒绝" value="-1"></el-option>
                                <el-option label="接收" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item>
                            <el-button type="primary" size="small" icon="search" @click="query">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <!-- 申请列表 -->
            <div class="applicationInfo">
                <el-table :data="tableData" border style="width: 100%" height="450">
                    <el-table-column type="index" label="序号" width="70"></el-table-column>
                    <el-table-column align="left" label="检查编号" prop="institutionName" :show-overflow-tooltip="true" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="患者编号" prop="applicationType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="姓名" prop="priority" width="70">
                    </el-table-column>
                    <el-table-column align="left" label="性别" prop="dealResult" width="70">
                    </el-table-column>
                    <el-table-column align="left" label="年龄" prop="complaintType" width="70">
                    </el-table-column>
                    <el-table-column align="left" label="系列时间" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="设备" prop="complaintType" width="70">
                    </el-table-column>
                    <el-table-column align="left" label="检查部位" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="来源" prop="complaintType" width="70">
                    </el-table-column>
                    <el-table-column align="left" label="申请时间" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="报告时间" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="报告状态" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="图像数" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="分片医师" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="报告医师" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="审核医师" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="回复日期" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column align="left" label="联系电话" prop="complaintType" width="90">
                    </el-table-column>
                    <el-table-column label="操作" align="left" width="100">
                        <template slot-scope="scope">
                            <el-button class="view" size="small" type="text" @click="handleDetail(scope.$index, scope.row)"><i class="el-icon-view"></i>申请详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="sizes, prev, pager, next" :total="1000">
                </el-pagination>
            </div>

            <!-- 查看申请详情dialog		 -->
            <el-dialog title="申请详情" size="large" :visible.sync="dialogApplicationDetailVisible" :close-on-click-modal="false">
                <el-form :model="form" :label-position="labelPosition">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="姓名" label-width="80px">
                                <el-input v-model="form.name" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="性别" label-width="80px">
                                <el-input v-model="form.modelCode" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="年龄" label-width="80px">
                                <el-input v-model="form.permissionCode" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="检查时间" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="检查方法" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="检查编号" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="患者ID" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="检查部位" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7" :offset="1">
                            <el-form-item label="检查类型" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="性质" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="15" :offset="1">
                            <el-form-item label="病史" label-width="80px">
                                <el-input v-model="form.permissionAddress" size="small" auto-complete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" size="small" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>

        </section>
    </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        acceptStatus: "",
        priority: ""
      },
      currentPage: 5,
      labelPosition: "left",
      dialogApplicationDetailVisible: false,
      tableData: [
        {
          id: 1,
          institutionName: "Institution",
          applicationType: "a",
          priority: "a",
          dealResult: "a",
          complaintType: "a",
          createTime: "2017-08-08 08:08:08"
        },
        {
          id: 2,
          institutionName: "Institution",
          applicationType: "b",
          priority: "b",
          dealResult: "b",
          complaintType: "b",
          createTime: "2017-08-08 08:08:08"
        },
        {
          id: 3,
          institutionName: "InstitutionInstitutionInstitution",
          applicationType: "c",
          priority: "c",
          dealResult: "c",
          complaintType: "c",
          createTime: "2017-08-08 08:08:08"
        },
        {
          id: 4,
          institutionName: "Institution",
          applicationType: "d",
          priority: "d",
          dealResult: "d",
          complaintType: "d",
          createTime: "2017-08-08 08:08:08"
        },
        {
          id: 5,
          institutionName: "Institution",
          applicationType: "e",
          priority: "e",
          dealResult: "e",
          complaintType: "e",
          createTime: "2017-08-08 08:08:08"
        }
      ]
    };
  },
  methods: {
    query() {
      console.log("submit!");
    },
    handleDetail(index, row) {
      this.dialogApplicationDetailVisible = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>


<style lang="scss" scoped>
.container {
  .applicationTitle {
    width: 100%;
    text-align: left;
    font-size: 22px;
    color: #444;
    height: 60px;
    border-bottom: 4px solid #cdd1da;
    line-height: 60px;
    padding-left: 20px;
  }
  .applicationContent {
    padding: 10px;
    background: #fff;
  }

  .applicationInfo {
    .el-table {
      font-size: 13px;
    }
    .view {
      color: #3c8dbc;
    }
  }
  .block {
    text-align: right;
    padding-top: 13px;
  }
}
</style>